// VideoPlayer 组件的 HTML 模板

export function render(shadowRoot, css, videos) {
    shadowRoot.innerHTML = `
        <style>${css}</style>
        <div class="video-player">
            <div class="video-container">
                <video class="video-element" 
                       playsinline 
                       muted 
                       loop
                       autoplay
                       preload="metadata">
                    您的浏览器不支持视频播放
                </video>
                
                <div class="video-overlay">
                    <div class="play-pause-btn">
                        <i class="play-icon">▶</i>
                        <i class="pause-icon">⏸</i>
                    </div>
                </div>
                

                
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
            
            <div class="video-indicators">
                ${videos.map((_, index) => 
                    `<div class="indicator ${index === 0 ? 'active' : ''}" data-index="${index}"></div>`
                ).join('')}
            </div>
            
            <div class="scroll-hint">
                <div class="scroll-icon">🖱️</div>
                <div class="scroll-text">滚动切换视频</div>
            </div>
        </div>
    `;
}